<script setup lang="js">

import { useAccountStore } from "@/stores/accountInfo";
import { BannerAdd, BannerList, BannerChange } from "@/api/banner";

const account = useAccountStore()

import { ref } from 'vue'
import { ElMessage } from "element-plus";

const API_BASE = import.meta.env.VITE_API_BASE || ''
const uploadAction = `${API_BASE}/api/banner/upload`
const uploadRef = ref()

const handleExceed = () => {
  ElMessage.warning(
    `只能上传一张图片`
  )
}

const submitUpload = () => {
  uploadRef.value.submit()
}

const handleSuccess = (res) => {
  const banner = {
    creatorId: account.currentInfo.id,
    url: res.data.url,
  }
  BannerAdd(banner).then(res => {
    if (res.data) {
      ElMessage({
        message: '添加成功',
        type: 'success',
      })
    }
    else {
      ElMessage.error('添加失败')
    }
  })
}

const tableData = ref([])

const ber = ref({
  divisionId: '',
  ban_id: '',
  name: '',
  url: '',
  pageNo: 1,
  pageSize: 10,
  total: 10,
})

const getBannerList = () => {
  BannerList(ber.value).then(res => {
    tableData.value = res.data.records.map(r => {
      // 若后端已返回 http 开头则保持原样；否则手动拼接
      if (/^https?:\/\//.test(r.url)) return r
      return { ...r, url: `${API_BASE}${r.url}` }     // dev: /image/...   prod: http://127.0.0.1:8080/image/...
    })
    ber.value.total = res.data.total
  })
}
getBannerList()

const PageSizeChange = (value) => {
  ber.value.pageSize = value
  getBannerList()
}
const PageCurrentChange = (value) => {
  ber.value.pageNo = value
  getBannerList()
}

const curId = ref({
  divisionId: '',
  banId: '',
})

const dialogVisible = ref(false)

const setCurId = (id) => {
  dialogVisible.value = true
  curId.value.divisionId = id
}

const changeBanner = () => {
  dialogVisible.value = false
  const fk = {
    banId: curId.value.banId,
    divisionId: curId.value.divisionId,
  }
  BannerChange(fk).then(res => {
    if (res.data) {
      ElMessage({
        message: '更改成功',
        type: 'success',
      })
    }
    else {
      ElMessage.error('更改失败')
    }
  })
}
</script>

<template>
  <div>
    <el-upload ref="uploadRef" :action="uploadAction" :auto-upload="false" :limit="1" :on-exceed="handleExceed"
      :on-success="handleSuccess">
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>

      <el-button class="ml-3" type="success" @click="submitUpload">
        上传文件
      </el-button>

      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500kb
        </div>
      </template>
    </el-upload>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="name" label="分区名称" />
      <el-table-column prop="banId" label="版面图id" />
      <el-table-column prop="url" label="版面图">
        <template #default="scope">
          <img v-if="scope.row.url" height="100px" :src="scope.row.url" alt="">
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button text type="danger" @click="setCurId(scope.row.divisionId)">
            更改
          </el-button>
          <el-dialog v-model="dialogVisible" title="更换图片" width="500" :before-close="handleClose">
            <span>
              <el-form-item label="想更换的图片id">
                <el-input type="number" v-model="curId.banId" />
              </el-form-item>
            </span>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="changeBanner">
                  确认
                </el-button>
              </div>
            </template>
          </el-dialog>
          <a :href="scope.row.url" download="版面图.jpg">下载</a>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="PageNo" v-model:page-size="PageSize" :page-sizes="[1, 2, 5, 10]" :size="size"
        :background="true" layout="total, sizes, prev, pager, next, jumper" :total="ber.total"
        @size-change="PageSizeChange" @current-change="PageCurrentChange" />
    </div>

  </div>

</template>

<style scoped lang="scss"></style>